<template>
  <div class="container">
    <div class="bottom-bar flex-row flex--x-center flex-y-center">
      <div class="mg-l pd-l">共一件商品</div>
      <div class="flex-grow-1 flex-col">
        <div class="mg-l pd-l">小计：<span class="moneyColor">￥999.00</span></div>
      </div>
      <div class="flex-grow-0 btn confirm" @click='' ><router-link to="" ><span>确认订单</span></router-link></div>
    </div>

    <div class="head flex-col">
      <div class="flex-grow-1 flex-row">
        <div class="flex-grow-1 flex-col flex-x-center userinfo">
          <div class="jiesuan-top flex-grow-1 flex-x-center flex-y-center">确认订单</div>
        </div>
      </div>
    </div>

    <!-- 我的订单 -->
    <van-cell-group class="mg-t mg-b">
     <div v-if="unlocation"><van-cell  is-link icon="location" title="请选择收货地址" url="">
     </van-cell>
     </div>
      <div v-else class="location pd flex-y-center">我的地址我的地址我的地址我的地址我的地址我的地址我的地址我的地址我的地址我的地址我的地址我的地址</div>
    </van-cell-group>

    <div class="goods">
      <div class="goods-title flex-y-center ">
        <span class="mg-l">商品信息</span>
      </div>
      <div class="pd goods-all clearfix">
      <div class="goods-img fl-l mg-r"><img src="../../assets/images/2.jpg" height="100" width="100" /></div>
      <div class="goods-main ">
        <div class="goods-info mg-b">宴会晚礼服2018款宴会晚礼服2018款宴会晚礼服2018款宴会晚礼服2018款</div>
        <div class="goods-size mg-b size-color">颜色：黑色；尺码：M</div>
        <div class="goods-price">
          <span class="price-color">￥150</span>
          <span class="fl-r price-color">X3</span>
        </div>
      </div>
    </div>
    </div>
    <div class="peisong">
      <van-cell-group class="">
      <van-cell  is-link  title="配送方式"  value="快递" url="">
      </van-cell>
    </van-cell-group>
      <van-cell-group class="">
        <van-cell  is-link  title="运费" url="" value="江浙沪包邮，其他地区十元">
        </van-cell>
      </van-cell-group>
      <van-cell-group class="">
        <van-cell  is-link  title="预约时间" url="" value="年月日送达">
        </van-cell>
      </van-cell-group>
      <van-cell-group class="">
        <van-cell  is-link  title="邀请好友享折扣" url="">
        </van-cell>
      </van-cell-group>
      <van-cell-group class="">
        <van-cell  is-link  title="客户留言" url="">
        </van-cell>
      </van-cell-group>
    </div>
    <div class="sum-price mg-t">
      <van-cell-group class="">
        <van-cell   title="订单金额"   url="">
        </van-cell>
        <van-cell   title="租金" url="">
        </van-cell>
      </van-cell-group>
    </div>




  </div>
</template>

<script>
    export default {
        data(){
          return{
            unlocation:true
          }
        }
    }

</script>

<style scoped lang="less">
  .container{
    background-color:#eee;
  }
  .jiesuan-top{
    width: 100%;
    height: 3rem;
    background-color: #000000;
    color: #ffff;
  }
  .location{
      height: 3rem;
  }
  .fl-r{
    float: right;
  }
  .fl-l{
    float: left;
  }
.goods-title{
  background-color: #fff;
  height: 2rem;
}
.goods-img{
  border-radius: 0.02rem;
}
.size-color{
  color: 	#CFCFCF;
}
.price-color {
  color: #F75B93;
}
  .bottom-bar {
    height: 2.4rem;
    width: 100%;
    position: fixed;
    bottom: 0;
    font-size: .7rem;
    left: 0;
    background-color: #fff;
    z-index: 3;
  }
  .bottom-bar span{
    color: #fff;
  }
  .btn {
    height: 2.4rem;
    width: 4rem;
    line-height: 2.4rem;
    text-align: center;
    color: #fff;
  }
  .confirm {
    background-color: #F75B93;
  }

</style>
